<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v=3.3.6)}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v=4.4.0)}"
          rel="stylesheet">
    <!--datapicker-->
    <link href="../../static/css/plugins/datapicker/datepicker3.css"
          th:href="@{/static/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">

    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
    <style type="text/css">
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-7">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <div class="row">
                                <div class="col-sm-2"><h5>基本信息</h5></div>
                                <div class="col-sm-6 col-sm-offset-4 text-right">
                                    <a href="javascript:void(0);" id="cancel" style="padding-right: 15px">取消</a>
                                    <a href="javascript:void(0);" id="complete">完成</a>
                                </div>
                                <div class="col-sm-2 col-sm-offset-8 text-right" style="display: none"><a
                                        href="javascript:void(0);" id="edit">编辑</a></div>
                            </div>

                        </div>
                        <div class="ibox-content">
                            <form class="form-horizontal" action="#" id="customerInfo">
                                <div class="form-group">
                                    <label for="customerName" class="col-sm-2 control-label">客户姓名</label>
                                    <div class="col-sm-4">
                                        <input type="email" class="form-control" id="customerName"
                                               value="叶建雄" placeholder="请输入客户姓名">
                                    </div>
                                    <label for="specialty" class="col-sm-2 control-label">原本专业</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="软件技术" class="form-control" id="specialty"
                                               placeholder="请输入原本专业">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="customerGender" class="col-sm-2 control-label">客户性别</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="男" class="form-control" id="customerGender"
                                               placeholder="性别">
                                    </div>
                                    <label for="purpose" class="col-sm-2 control-label">意向专业</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="java开发" class="form-control" id="purpose"
                                               placeholder="Email">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="phone" class="col-sm-2 control-label">客户电话</label>
                                    <div class="col-sm-4">
                                        <input type="number" value="18807031363" class="form-control" id="phone"
                                               placeholder="电话">
                                    </div>
                                    <label for="channel" class="col-sm-2 control-label">渠道类型</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="招聘网站" class="form-control" id="channel"
                                               placeholder="渠道类型">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-sm-2 control-label">客户邮箱</label>
                                    <div class="col-sm-4">
                                        <input type="email" value="1210736981@qq.com" class="form-control" id="email"
                                               placeholder="邮箱">
                                    </div>
                                    <label for="customerSource" class="col-sm-2 control-label">客户来源</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" id="customerSource"
                                               value="前程无忧" placeholder="Email">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="customerType" class="col-sm-2 control-label">客户类型</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="潜在客户" class="form-control" id="customerType"
                                               placeholder="未编辑">
                                    </div>
                                    <label for="customerBelong" class="col-sm-2 control-label">客户归属</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="潜在客户" class="form-control" id="customerBelong">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="interviewTime" class="col-sm-2 control-label">面试时间</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="2020-06-16" class="form-control" id="interviewTime">
                                    </div>
                                    <label for="divideClasses" class="col-sm-2 control-label">是否分班</label>
                                    <div class="col-sm-4">
                                        <input type="text" value="是" class="form-control" id="divideClasses"
                                               placeholder="是否分班">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="evaluate" class="col-sm-2 control-label">专业评价</label>
                                    <div class="col-sm-10">
                                        <textarea id="evaluate" style="width: 100%" rows="6"></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>款项信息</h5>
                        </div>
                        <div class="ibox-content">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">预付金额：</label>
                                    <div class="col-sm-4">
                                        <p>0.0元</p>
                                    </div>
                                    <label class="col-sm-2 control-label">贷款金额:</label>
                                    <div class="col-sm-4">
                                        <p>0.0元</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="totalMoney" class="col-sm-2 control-label">总金额：</label>
                                    <div class="col-sm-4">
                                        <p id="totalMoney">0.0元</p>
                                    </div>
                                    <label for="repayment" class="col-sm-2 control-label">还款方式：</label>
                                    <div class="col-sm-4">
                                        <p id="repayment">0.0元</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="noLoan" class="col-sm-2 control-label">是否贷款：</label>
                                    <div class="col-sm-4">
                                        <p id="noLoan">未贷款</p>
                                    </div>
                                    <label for="refund" class="col-sm-2 control-label">每月还款：</label>
                                    <div class="col-sm-4">
                                        <p id="refund">0.0元</p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <a href="">跟进记录</a>
                        </div>
                        <div class="" id="ibox-content">
                            <div id="vertical-timeline" class="vertical-container light-timeline">
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon blue-bg">
                                        <i class="fa fa-file-text"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2>客户类型</h2>
                                        <p>潜在客户</p>
                                        <span class="vertical-date">
                                        今天 <br>
                                        <small>2020-06-11 14：59</small>
                                    </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon blue-bg">
                                        <i class="fa fa-file-text"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2>客户类型</h2>
                                        <p>潜在客户</p>
                                        <a href="#" class="btn btn-sm btn-success">查看更多</a>
                                        <span class="vertical-date">
                                        今天 <br>
                                        <small>2020-06-11 14：59</small>
                                    </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon blue-bg">
                                        <i class="fa fa-file-text"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2>客户类型</h2>
                                        <p>潜在客户</p>
                                        <span class="vertical-date">
                                        今天 <br>
                                        <small>2020-06-11 14：59</small>
                                    </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon blue-bg">
                                        <i class="fa fa-file-text"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2>客户类型</h2>
                                        <p>潜在客户</p>
                                        <span class="vertical-date">
                                        今天 <br>
                                        <small>2020-06-11 14：59</small>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v=2.1.4)}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6"
        th:src="@{/static/js/bootstrap.min.js(v=3.3.6)}"></script>
<!-- Data picker -->
<script src="../../static/js/plugins/datapicker/bootstrap-datepicker.js"
        th:src="@{/static/js/plugins/datapicker/bootstrap-datepicker.js}"></script>
<script src="../../static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/static/js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js}"></script>
<script>
    $("#complete").click(function () {
        //异步保存数据
        /* $.ajax({
             url:"",
             method: "post",
             ...
         })*/
        //将  取消和 完成隐藏
        $(".col-sm-6.col-sm-offset-4.text-right").css("display", "none");
        //将编辑按钮显示
        $(".col-sm-2.col-sm-offset-8.text-right").css("display", "inline");

        $(".form-control").css("border", "none").attr("readOnly", "false");
        $("#evaluate").css("border", "none").attr("readOnly", "false");


    });
    $("#cancel").click(function () {
        //将  取消和 完成隐藏
        $(".col-sm-6.col-sm-offset-4.text-right").css("display", "none");
        //将编辑按钮显示
        $(".col-sm-2.col-sm-offset-8.text-right").css("display", "inline");

        $(".form-control").css("border", "none").attr("readOnly", "false");
        $("#evaluate").css("border", "none").attr("readOnly", "false");
    });
    $("#edit").click(function () {
        $(".form-control").css("border", "1px solid #e5e6e7").removeAttr("readOnly");
        $("#evaluate").css("border", "1px solid #e5e6e7").removeAttr("readOnly");
        //将编辑按钮隐藏
        $(".col-sm-6.col-sm-offset-4.text-right").css("display", "inline");
        //将取消和 完成显示
        $(".col-sm-2.col-sm-offset-8.text-right").css("display", "none");

    });
</script>
<script>
    $('#interviewTime').datepicker({
        todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        format: "yyyy-mm-dd",
        language: 'zh-CN',// 汉化
        autoclose: true
    });
</script>
<script>
    $(function () {
        // Local script for demo purpose only
        $('#lightVersion').click(function (event) {
            event.preventDefault()
            $('#ibox-content').removeClass('ibox-content');
            $('#vertical-timeline').removeClass('dark-timeline');
            $('#vertical-timeline').addClass('light-timeline');
        });

        $('#darkVersion').click(function (event) {
            event.preventDefault()
            $('#ibox-content').addClass('ibox-content');
            $('#vertical-timeline').removeClass('light-timeline');
            $('#vertical-timeline').addClass('dark-timeline');
        });

        $('#leftVersion').click(function (event) {
            event.preventDefault()
            $('#vertical-timeline').toggleClass('center-orientation');
        });


    });
</script>
</body>

</html>